<template>
  <div>
    <van-sticky>
      <form action="/">
        <van-search
          v-model="value"
          show-action
          @cancel="onCancel"
          @search="onSearch"
        />
      </form>
    </van-sticky>

    <van-row class="select">
      <van-col @click="onSearch" span="8">综合</van-col>
      <van-col @click="prices" span="8">价格</van-col>
      <van-col span="8">分类</van-col>
    </van-row>
    <van-list
      v-model="loading"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多了"
    >
      <van-row type="flex" justify="space-between" class="goodslist">
        <van-col
          span="12"
          v-for="item in loadlist"
          :key="item.goods_id"
          @click="gotodetials(item.goods_id)"
        >
          <img :src="item.goods_small_logo" alt="" />
          <p>{{ item.goods_name }}</p>
          <div>
            <span>到手价</span>
            <span>￥{{ item.goods_price }}</span>
          </div>
        </van-col>
      </van-row>
    </van-list>
  </div>
</template>
<script>
export default {
  name: "Searchgoods",
  data() {
    return {
      value: "",
      loading: false,
      finished: false,
      goods_name: "",
      cat_one_id: "",
      page: 1,
      loadlist: [],
      flag: true,
    };
  },
  async created() {
    // 获取参数
    const {goods_name, cat_one_id } = this.$route.query;
    this.goods_name = goods_name;
    this.cat_one_id = cat_one_id;
    if (goods_name) {
      this.value = goods_name;
    }
  },
  destroyed() {},
  methods: {
    prices() {
      if (this.flag == true) {
        this.flag = false;
        this.loadlist = this.loadlist.sort(function (a, b) {
          return a.goods_price - b.goods_price;
        });
      } else {
        this.flag = true;
        this.loadlist = this.loadlist.sort(function (a, b) {
          return b.goods_price - a.goods_price;
        });
      }
    },
    onCancel() {
      this.$router.back();
    },
    async onLoad() {
      this.loading = true;
      const { data } = await this.$request.get("/api/goods", {
        params: {
          goods_name: this.value ? this.value : this.goods_name,
          cat_one_id: this.cat_one_id,
          page: this.page,
        },
      });
      this.loadlist.push(...data.data.list);
      this.loading = false;
      this.page++;
      if (this.loadlist.length === data.data.total) {
        this.finished = true;
      }
    },
    async onSearch() {
      (this.loading = false),
        (this.finished = false),
        (this.page = 1),
        (this.loadlist = []),
        this.onLoad();
    },
    gotodetials(id) {
      this.$router.push("/goods/" + id);
    },
  },
  computed: {},
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.select {
  width: 100%;
  height: 40px;
  background-color: #fafafa;
  border-bottom: 1px solid #eee;
  .van-col {
    font-size: 14px;
    line-height: 40px;
  }
}
.goodslist {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  .van-col {
    width: 49%;
    height: 280px;
    margin-bottom: 10px;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 5px;
    box-sizing: border-box;
    img {
      width: 100%;
      border-radius: 10px;
    }
    p {
      text-align: left;
      font-size: 15px;
      color: #12161c;
      height: 40px;
      overflow: hidden;
      margin-top: 10px;
    }
    div {
      margin-top: 5px;
      text-align: left;
      span {
        font-size: 16px;
        color: #fa1e32;
        &:last-child {
          font-size: 20px;
        }
      }
    }
  }
}
.van-list {
  padding-bottom: 60px;
}
</style>
